<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户反馈列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .layui-card-body {
            padding: 9px 9px;
            line-height: 24px;
        }
        .layui-table-cell{
            height: inherit;
            line-height: 25px;
        }
        .headerCenter{
            margin-left: 150px;
        }
        .operation{
            color: #28988B;
        }
        .backColor{
            background-color: #F1F1F1;
        }
        .btnRight{
            float: right;
        }
        .fl{
            float: left;
        }
        .se>p>span{
            color: red;
        }
        .se>p{
            width: 142px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background-color: #FFFFFF;
            border: 1px solid #F1F1F1;
            margin: 0px 18px 20px;
        }
       .layui-input{
           width: 125px;
       }
        .layui-form-item .layui-input-inline{
            width: 158px;
        }
        .se p>span{
            color: red;
        }
        .se p{
            width: 142px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background-color: #FFFFFF;
            border: 1px solid #F1F1F1;
            margin: 0px 18px 20px;
        }
        .se .selectStyle{
            color: #fff;
            background-color: #008789;
        }
    </style>
</head>
<body>
<div class="layui-row boxStyle">
    <div class="layui-col-md10">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                用户反馈列表
                <div class="btnRight" style="margin-bottom: 20px">
                    <button onclick="refresh()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                        刷新
                    </button>
                    <button onclick="backOff()" type="button" class="layui-btn layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-return"></i>
                        返回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="se boxStyle" style="margin-left: 160px">
    <div onclick="ToBeReviewed()" id="ToBeReviewed">
        <p class="fl sele1">待审核(<span>2</span>)</p>
    </div>
    <div onclick="Accepted()" id="Accepted">
        <p class="fl sele2 ">已受理(<span>16</span>)</p>
    </div>
</div>
<!--筛选查询-->
<div class="layui-row boxStyle">
    <div class="layui-col-md10">
        <div class="layui-card headerCenter">
            <div class="layui-card-header backColor">
                <i class="layui-icon">&#xe615;</i>
                筛选查询
            </div>
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户账号：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userAccount" required lay-verify="required" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
                        </div>

                        <label class="layui-form-label">反馈类型：</label>
                        <div class="layui-input-inline">
                            <select id="feedbackType" name="feedbackType" lay-verify="city">
                                <option value=""></option>
                                <option value="2">视频反馈</option>
                                <option value="3">商品反馈</option>
                                <option value="4">其他反馈</option>
                            </select>
                        </div>

                        <label class="layui-form-label">意见分类：</label>
                        <div class="layui-input-inline">
                            <select id="opinionClassification" name="opinionClassification" lay-verify="city">
                                <option value=""></option>
                                <option value="2">很好</option>
                                <option value="3">好</option>
                                <option value="4">一般</option>
                                <option value="5">差</option>
                            </select>
                        </div>

                        <label class="layui-form-label">反馈时间：</label>
                        <div class="layui-input-inline">
                            <input name="createDate" type="text" class="layui-input" id="test5" placeholder="请选择反馈时间">
                        </div>

                            <span id="caoZuo">
                                <button onclick="KeywordSearch()" type="button" class="layui-btn ">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button onclick="reset()" type="button" class="layui-btn  layui-btn-warm " >
                                    <i class="layui-icon layui-icon-refresh-1"></i> 重置
                                </button>
                            </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--商品列表-->
<div class="layui-row backColor boxStyle" style="margin-top: 20px">
    <div class="layui-col-md10 headerCenter ">
        <div id="toolutil">
                <span>
                    <i class="layui-icon layui-icon-align-left"></i>
                    用户反馈数据列表
                </span>
        </div>
        <!--商品表格-->
        <div class="layui-col-md10">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<script>
        var table ;
        layui.use(['form','jquery','table','laydate'],function() {
        var form = layui.form;
        var jquery = layui.jquery;
        table = layui.table;
        var laydate = layui.laydate;
        //时间选择器
        laydate.render({
            elem:'#test5'
        });

        $.ajax({
            url:'/UserFeedback/getUserFeedbackTable',
            methos:'post',
            dataType:'json',
            success:function (data) {
                tab(data);
            }
        })

        //表格渲染
        function tab(data) {
            table.render({
                id:"demo",
                elem:'#demo',
                width:1350,
                data:data.data,
                page:true,
                cols:[[
                    {type:'checkbox'},
                    {title:'序号', align:'center' ,width:70, templet:function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:'userId',title:'用户账号',align:'center'},
                    {field:'feedbackType',title:'意见反馈类型',align:'center',templet:function (data) {
                        var feedbackType;
                            if(data.feedbackType == 2){
                                feedbackType = "视频反馈";
                            }else if(data.feedbackType == 3){
                                feedbackType = "商品反馈";
                            }else{
                                feedbackType = "其他反馈";
                            }
                            return "<div>"+feedbackType+"</div>" ;
                        }},
                    {field:'feedbackClassification',title:'意见分类',align:'center',templet:function (data) {
                            var feedbackClassification;
                            if(data.feedbackClassification == 2){
                                feedbackClassification = "很好";
                            }else if(data.feedbackClassification == 3){
                                feedbackClassification = "好"
                            }else if(data.feedbackClassification == 4){
                                feedbackClassification = "一般";
                            }else{
                                feedbackClassification = "差";
                            }
                            return "<div>"+feedbackClassification+"</div>";
                        }},
                    {field:'createDate',title:'反馈时间',align:'center'},
                    {field:'feedbackContent',title:'反馈内容',align:'center'},
                    {field:'feedbackStatus',title:'操作',align:'center',templet:function(data){
                            var feedbackStatus;
                            if(data.feedbackStatus == 2){
                                feedbackStatus="已提交";
                            }else if(data.feedbackStatus == 3){
                                feedbackStatus="<a onclick='selectAccepted()' class='operation'>受理</a>";
                            }else if(data.feedbackStatus == 4){
                                feedbackStatus="已受理"+'&nbsp;&nbsp;'+"<a onclick='del("+data.feedbackId+")' class='operation'>删除</a>";
                            }else if(feedbackStatus == 5){
                                feedbackStatus="未提交";
                            }else if (feedbackStatus == 6){
                                feedbackStatus="提交失败1"
                            }
                            return "<a class='operation'>"+feedbackStatus+"</a>"
                        }}
                ]]
            })
        }

        //刷新
        refresh = function refresh() {
            window.location.reload();
        }

        //返回
            backOff = function backOff() {
                var arr = localStorage.getItem("numArr");
                var numArr = arr.split(",");
                numArr.pop();
                window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
                localStorage.setItem("numArr",numArr);
            }
        //重置
        reset = function reset(){
            $('input[name = title]').val("");
            $("select[name= feedbackType]").val('0');
            $("select[name= opinionClassification]").val('0');
        }
        
        //搜索
        KeywordSearch = function KeywordSearch() {

            var feedbackType = $("#feedbackType option:selected").val();
            var feedbackClassification = $("#opinionClassification option:selected").val();
            var createDate = $("input[name = createDate]").val();
            var userId = $("input[name = userAccount]").val();
            var selectData = {
                userId :  userId,
                feedbackType : feedbackType,
                feedbackClassification : feedbackClassification,
                createDate : createDate
            }

            $.ajax({
                url:'/UserFeedback/queryFeedback',
                dataType:'json',
                data:selectData,
                success:function (data) {
                    tab(data);
                }
            })
        }

        //待审核
        ToBeReviewed = function ToBeReviewed(feedbackStatus){
            var feedbackStatus = $("#ToBeReviewed").text();
            $.ajax({
                url:'/UserFeedback/queryToBeReviewed',
                dataType:'json',
                data:feedbackStatus,
                success:function (data) {
                    tab(data);
                }
            })
        }
        //已受理
        Accepted = function Accepted(){

            var feedbackStatus = $("#Accepted").text();
            $.ajax({
                url:'/UserFeedback/queryAccepted',
                dataType:'json',
                data:feedbackStatus,
                success:function (data) {
                    tab(data);
                }
            })
        }
        //删除
            del = function del(feedbackId){
                $.ajax({
                    url:'/UserFeedback/del',
                    data:{"feedbackId":feedbackId},
                    dataType:'json',
                    success:function (data) {
                        if(data){
                            layer.msg("删除成功");

                        }else{
                            layer.msg("删除失败");
                        }
                        window.location.reload()  //刷新页面
                    }
                })
            }
        //个数
        getNum();
        function getNum() {
            //待审核个数
            $.ajax({
                url:'/UserFeedback/getToBeReviewedNum/',
                type:'post',
                dataType:'json',
                success:function (data) {
                    $('.sele1 span').text(data.data);
                }
            })
            //已受理个数
            $.ajax({
                url:'/UserFeedback/getAcceptedNum/',
                type:'post',
                dataType:'json',
                success:function (data) {
                    $('.sele2 span').text(data.data);
                }
            })
        }
        //图标样式
        $("#ToBeReviewed").on("click",function () {
            $(this).children(".sele1").addClass("selectStyle").parent().siblings().children(".sele2").removeClass("selectStyle");
        })
        $("#Accepted").on("click",function () {
            $(this).children(".sele2").addClass("selectStyle").parent().siblings().children(".sele1").removeClass("selectStyle");
        })

        //反馈弹出框
        selectAccepted = function  selectAccepted() {
            //获取选中行
            table.on('row(test)', function(obj){
                localStorage.setItem("fanKui",JSON.stringify(obj.data));
            });

            layer.open({
                type:2,
                content:"/FeedbackList/FeedbackFrame.html",
                area:['570px','510px'],
                title:"受理用户反馈信息",
                end:function () {

                }
            });
        }
    });
</script>
</body>
</html>